<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>10_CSS3-渐变属性-线性渐变</title>

        <style>
            div {
                float: left;
                width: 300px;
                height: 200px;
                border: 1px solid black;
                margin-right: 10px;
                margin-bottom: 10px;
            }

            .item1 {
                /* 一个颜色不可以实现渐变 */
                background-image: linear-gradient(#008000);
                background-image: repeating-linear-gradient(green,yellow,red);
            }

            .item2 {
                /* 无论多少个颜色 都可以从上到下依次渐变 */
                background-image: linear-gradient(green,yellow,red);
                background-image: repeating-linear-gradient(green,yellow,red,blue,tomato);
            }

            .item3 {
                background-image: linear-gradient(to right,green,yellow,red);
                background-image: linear-gradient(to top,green,yellow,red);
                background-image: linear-gradient(to left,green,yellow,red);
                background-image: repeating-linear-gradient(to right bottom,green,yellow,red);

            }

            .item4 {
                background-image: repeating-linear-gradient(180deg,green,yellow,red);
            }

            .item5 {
                background-image: linear-gradient(green 50px,yellow 100px,red 150px);
            }

            .item6 {
                background-image: repeating-linear-gradient(green 50px,yellow 100px,red 150px);
            }





        </style>
    </head>
    <body>
        <div class="item item1">
            2个颜色
        </div>

        <div class="item item2">
            3个颜色
        </div>

        <div class="item item3">
            改变渐变的方向
        </div>

        <div class="item item4">
            可以任意的改变度数
        </div>

        <div class="item item5">
            指定颜色的高度
        </div>

        <div class="item item6">
            指定颜色的高度
        </div>
    </body>
</html>